<template>
  <el-card>
    <div class="el_card">
      <img :src="userStore.avatar" />
      <div class="el_card_text">
        <h1>{{ getTime() }}好！ {{ userStore.username }}</h1>
        <h2>{{ setting.left_title }}</h2>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { getTime } from '@/utils/time'
// 引入设置标题与logo的配置文件
import setting from '@/setting'
import useUserStore from '@/store/modules/user'
let userStore = useUserStore()
</script>

<style scoped lang="scss">
.el_card {
  display: flex;
  // justify-content: space-between;
  align-items: center;

  img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }

  .el_card_text {
    margin-left: 20px;

    h1 {
      margin-bottom: 20px;
      font-size: larger;
      font-weight: bold;
    }

    h2 {
      font-weight: lighter;
    }
  }
}
</style>
